<template>
  <div class="selfContainer_module">
    <el-tabs
    v-model="editableTabsValue"
    type="card"
    @tab-change="changeTab"
    @tab-remove="removeTab"
  >

    <el-tab-pane
      v-for="(item) in tabList"
      :key="item.name"
      :label="item.title"
      :name="item.name"
      :closable="item.name !== 'home'"
    >
    </el-tab-pane>
  </el-tabs>
    <!-- 关闭所有页签 -->
  <el-button class="close-all-tabs-btn" @click="closeAllTabs">
    {{$t("close_all-tabs")}}
  </el-button>
  <div class="contain_module">
    <el-card style="height:100%;">
      <router-view></router-view>
    </el-card>
  </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,watchEffect,ref,PropType } from "vue"
import {useRouter} from "vue-router"
import { RouteTab } from "../../store/routerTab/routerTab"
export default defineComponent({
  props: {
    tabList: {
      type:Array as PropType<RouteTab[]>,
      defalut: []
    },
    currentIndex: {
      type:String,
    }
  },
    name: "selfContainer",

    setup(props,{emit}) {
      const editableTabsValue = ref("")
      const router = useRouter()
      const removeTab = (payload:string) => {
          emit("clsoeTab",payload)
      }

      const changeTab = (payload:string) => {
        emit("changeTab",payload)
      }

      // 关闭所有页签
      const closeAllTabs = () => {
        localStorage.removeItem("routeTabsList")
        router.push("/baseLayout/home")
      }

      watchEffect (() => {
        editableTabsValue.value = props.currentIndex??""
      })

      return {
        editableTabsValue,
        removeTab,
        changeTab,
        closeAllTabs,
      }


      
    }
})

</script>
<style>
  .el-tabs__header {
    margin: 0;
  }
  .close-all-tabs-btn {
    position: absolute;
    right: 40px;
    top: 8%;
  }
  .contain_module .el-tabs__header {
    position: relative;
  }
  .contain_module .el-card__body {
    height: 100%;
  }
</style>
<style scoped>
.selfContainer_module {
  width: 100%;
  padding: 10px;
}
.contain_module {
  padding: 10px 0px;
  height: calc(100% - 50px);
  box-sizing: border-box;
  
}
</style>